import React from 'react';
import { Form, Input, InputNumber, Switch, Select, DatePicker, Card, Space, Divider } from 'antd';
import { Paper, PaperStatus } from '@/types/question';
import dayjs from 'dayjs';
import styles from './PaperSettingsPanel.module.css';

const { TextArea } = Input;
const { Option } = Select;
const { RangePicker } = DatePicker;

interface PaperSettingsPanelProps {
  settings: Partial<Paper>;
  onChange: (settings: Partial<Paper>) => void;
}

const PaperSettingsPanel: React.FC<PaperSettingsPanelProps> = ({ settings, onChange }) => {
  const [form] = Form.useForm();

  // 初始化表单值
  React.useEffect(() => {
    form.setFieldsValue({
      ...settings,
      time_range: settings.start_time && settings.end_time
        ? [dayjs(settings.start_time), dayjs(settings.end_time)]
        : undefined,
    });
  }, [settings, form]);

  // 处理表单值变化
  const handleValuesChange = (changedValues: any, allValues: any) => {
    const newSettings = { ...allValues };
    
    // 处理时间范围
    if (newSettings.time_range) {
      newSettings.start_time = newSettings.time_range[0]?.toISOString();
      newSettings.end_time = newSettings.time_range[1]?.toISOString();
    }
    delete newSettings.time_range;

    onChange(newSettings);
  };

  return (
    <div className={styles.panel}>
      <Form
        form={form}
        layout="vertical"
        onValuesChange={handleValuesChange}
        initialValues={settings}
      >
        <Card title="基本信息" className={styles.card}>
          <Form.Item
            name="title"
            label="试卷标题"
            rules={[{ required: true, message: '请输入试卷标题' }]}
          >
            <Input placeholder="请输入试卷标题" size="large" />
          </Form.Item>

          <Form.Item name="description" label="试卷描述">
            <TextArea rows={4} placeholder="请输入试卷描述（可选）" />
          </Form.Item>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <Form.Item name="status" label="发布状态" rules={[{ required: true }]}>
              <Select>
                <Option value="draft">草稿</Option>
                <Option value="published">已发布</Option>
                <Option value="ended">已结束</Option>
              </Select>
            </Form.Item>

            <Form.Item name="is_public" label="是否公开" valuePropName="checked">
              <Switch checkedChildren="公开" unCheckedChildren="私有" />
            </Form.Item>
          </div>
        </Card>

        <Card title="时间配置" className={styles.card}>
          <Form.Item name="time_range" label="考试时间范围">
            <RangePicker 
              showTime 
              style={{ width: '100%' }}
              placeholder={['开始时间（可选）', '结束时间（可选）']}
              format="YYYY-MM-DD HH:mm:ss"
            />
          </Form.Item>

          <Form.Item 
            name="duration" 
            label="考试时长（分钟）"
            help="设置为0表示不限时"
          >
            <InputNumber min={0} style={{ width: '100%' }} />
          </Form.Item>
        </Card>

        <Card title="分数配置" className={styles.card}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <Form.Item 
              name="total_score" 
              label="总分"
              help="由题目分数自动计算"
            >
              <InputNumber min={0} style={{ width: '100%' }} disabled />
            </Form.Item>

            <Form.Item name="passing_score" label="及格分数">
              <InputNumber min={0} style={{ width: '100%' }} />
            </Form.Item>
          </div>
        </Card>

        <Card title="显示配置" className={styles.card}>
          <Space direction="vertical" style={{ width: '100%' }}>
            <Form.Item name="show_score_after_submit" valuePropName="checked" style={{ marginBottom: 12 }}>
              <Switch checkedChildren="提交后显示分数" unCheckedChildren="提交后不显示分数" />
            </Form.Item>

            <Form.Item name="show_answer_after_submit" valuePropName="checked" style={{ marginBottom: 12 }}>
              <Switch checkedChildren="提交后显示答案" unCheckedChildren="提交后不显示答案" />
            </Form.Item>

            <Form.Item name="show_analysis_after_submit" valuePropName="checked" style={{ marginBottom: 12 }}>
              <Switch checkedChildren="提交后显示解析" unCheckedChildren="提交后不显示解析" />
            </Form.Item>

            <Form.Item name="random_question_order" valuePropName="checked" style={{ marginBottom: 12 }}>
              <Switch checkedChildren="随机题目顺序" unCheckedChildren="固定题目顺序" />
            </Form.Item>

            <Form.Item name="random_choice_order" valuePropName="checked" style={{ marginBottom: 0 }}>
              <Switch checkedChildren="随机选项顺序" unCheckedChildren="固定选项顺序" />
            </Form.Item>
          </Space>
        </Card>

        <Card title="提交配置" className={styles.card}>
          <Form.Item name="allow_multiple_submit" label="允许多次提交" valuePropName="checked">
            <Switch />
          </Form.Item>

          <Form.Item 
            name="max_submit_count" 
            label="最多提交次数"
            dependencies={['allow_multiple_submit']}
          >
            <InputNumber 
              min={1} 
              style={{ width: '100%' }}
              disabled={!form.getFieldValue('allow_multiple_submit')}
            />
          </Form.Item>
        </Card>
      </Form>
    </div>
  );
};

export default PaperSettingsPanel;

